<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A dynamically updating filled range chart with a threshold</title>
    
    <meta name="description" content="A dynamically updating filled range chart. The data here is simply generated randomly but could just as easily be retrieved from a server via AJAX (for example)." />
     
</head>
<body>

    <h1>A dynamically updating filled range chart with a threshold</h1>
    
    <p>
        This chart is very similar to the regular scrolling line chart but is a filled range chart with a threshold set.
    </p>

    <canvas id="cvs" width="1000" height="250">[No canvas support]</canvas>
    
    <script>

        $(document).ready(function ()
        {
            var obj       = null;
            var numvalues = 600;
            var value     = 25;

            // RGraph.array_pad(array, length[, value])
            var data1 = RGraph.array_pad([], numvalues, null);
            var data2 = RGraph.array_pad([], numvalues, null);
        
            function drawGraph ()
            {
                // "cache" this in a local variable
                var RG = RGraph;
                var ma = Math;
                var canvas = document.getElementById("cvs");
                RG.clear(canvas);
                

                if (!obj) {
                    obj = new RGraph.Line({
                        id: 'cvs',
                        data: [data1, data2],
                        options: {
                            xticks: 100,
                            background: {
                                barcolor1: 'white',
                                barcolor2: 'white'
                            },
                            title: {
                                self: 'Bandwidth used (Mb/s)',
                                xaxis: {
                                    self: 'Last 30(ish) seconds',
                                    pos: 0.5
                                },
                                yaxis: {
                                    self: 'Bandwidth (MB/s)',
                                    pos: 0.5
                                },
                                vpos: 0.5
                            },
                            colors: ['black'],
                            linewidth: 0.5,
                            yaxispos: 'right',
                            ymax: 50,
                            numxticks: 0,
                            numyticks: 0,
                            filled: {
                                self: true,
                                range: {
                                    self: true,
                                    threshold: {
                                        self: 25,
                                        colors: ['red','#0c0']
                                    }
                                }
                            },
                            fillstyle: 'red',
                            colors: ['black'],
                            tickmarks: null
                        }
                    }).draw()
                }

                
                value = value + RG.random(-3,3);
                value = ma.max(0,value)
                value = ma.min(50,value)
                
                obj.original_data[0].push(Math.min(value + 5, 50));
                obj.original_data[1].push(Math.max(value - 5, 0));
                
                obj.original_data[0] = RG.arrayShift(obj.original_data[0]);
                obj.original_data[1] = RG.arrayShift(obj.original_data[1]);
                
                obj.draw();

                

                setTimeout(drawGraph, 16.666);
            }



            drawGraph();
        })
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>